<template>
  <div class="loading" v-if="ownState === null ? loadingState : ownState">
    <!--{{ownState === null ? 'loadingState:'+loadingState : 'ownState:'+ownState}}-->
    <mt-spinner type="triple-bounce" color="#309FEA"></mt-spinner>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import { Spinner } from 'mint-ui'
  export default{
    name: 'loading',
    props: {
      ownState: {
        default: null
      }
    },
    computed: {
      ...mapGetters(
          ['loadingState']
      )
    },
    components: {
      'mt-spinner': Spinner
    }
  }
</script>
<style lang="less" scoped>
  .loading{
    position: absolute;
    z-index: 999;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
  }
  .loading::before{
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;left: 0;right: 0;bottom: 0;
    background: hsla(0,0%,100%,.6);
  }
</style>
